<template>
  <div>
    <div class="c-flex-row c-aligni-center c-justify-center c-p c-ph24 c-pv14" :class="[{'search-fixed': searchFixed}, bgSearch]">
      <div class="c-flex-row c-flex-grow1 c-w0 c-aligni-center c-pv10 c-ph20 c-hh52 c-br28 c-p" :class="bgInput" @click.stop="searchClick">
        <!-- <div class="c-flex-row c-aligni-center c-justify-center c-ww32 c-hh32" v-show="!show && cancelButton ==='auto'">
          <i class="iconfont c-fs24" :class="searchIconClass">&#xe6d6;</i>
        </div>
        <div class="c-flex-row c-aligni-center c-justify-center c-ww32 c-hh32" v-show="cancelButton ==='always' || show && cancelButton ==='auto'">
          <i class="iconfont icon-zhixiangzuo c-fs24" :class="searchStyle ? searchStyle : 'theme-fc'" @click.stop="cancel"></i>
        </div> -->
        <div class="c-flex-row c-aligni-center c-justify-sb c-fs24 c-ml16 c-ww110" v-show="(selectList.length > 0 && show ) || showSelect">
          <popup-picker :themeColor="$getThemeColor()" class="selectPicker" title="" v-model="selectItem" :data="selectList" @on-change="changeSelect" @on-show="onShow" @on-hide="onHide"></popup-picker>
          <span class="iconfont c-fs16">{{isShowIcon ? '&#xe6ab;' : '&#xe6a9;'}}</span>
          <span class="c-fc-sgray">|</span>
        </div>
        <input ref="input" type="text" :placeholder="placeholder" class="c-fs24 c-flex-grow1 needsClick c-w0" v-model="searchVal" @focus="inputFocus" @blur="inputBlur" @keyup.enter="search">
        <!-- <div v-show="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='')" class="c-flex-row c-aligni-center c-pl5 c-pa c-p-r20" @click.stop="clear">
          <i class="iconfont icon-shanchu c-fs24"></i>
        </div> -->
        <div v-show="show && searchVal!==''" class="c-flex-row c-aligni-center c-pl5 c-pa c-p-r20" @click.stop="cancel">
          <i class="iconfont c-fc-sgray c-fs24">&#xe757;</i>
        </div>
      </div>
      <!-- <div @click.stop="search" class="c-pl10 c-lh52 c-fs24" :class="searchStyle ? searchStyle : 'theme-fc'" v-if="searchButton ==='always' || show && searchButton ==='auto'">{{searchMsg}}</div> -->
      <div @click.stop="search" class="c-pl10 c-lh52 c-fs24" :class="searchStyle ? searchStyle : 'theme-fc'">{{searchMsg}}</div>
    </div>
    <div class="c-hh80" v-if="searchFixed"></div>
  </div>
</template>

<script>
import { PopupPicker } from 'ckjrweb-mp-ui/src/components/index'
export default {
  name: "NewSearchBar",
  components: {
    PopupPicker
  },
  props: {
    //placeholder 搜索栏Placeholder
    placeholder: {
      type: String,
      default: "请输入搜索内容"
    },
    //clearButton = [always|auto|none] 是否显示清除按钮 always 一直显示 auto 输入框不为空时显示 none 一直不显示
    clearButton: {
      type: String,
      default: "auto"
    },
    // cancelButton = [always|auto|none] 是否显示取消按钮 always 一直显示 auto 输入框不为空时显示 none 一直不显示
    cancelButton: {
      type: String,
      default: "auto"
    },
    // searchButton = [always|auto|none] 是否显示搜索按钮 always 一直显示 auto 输入框不为空时显示 none 一直不显示
    searchButton: {
      type: String,
      default: "auto"
    },
    // searchText 返回的搜索值
    searchText: {
      type: String,
      default: ''
    },
    // searchMsg 搜索按钮的文字
    searchMsg: {
      type: String,
      default: '搜索'
    },
    // selectList下拉框数据
    selectList: {
      type: Array,
      default: () => []
    },
    bgInput: {
      type: String,
      default: 'c-bg-sgray'
    },
    bgSearch: {
      type: String,
      default: 'c-bg-white'
    },
    searchStyle: {
      type: String,
      default: 'theme-fc'
    },
    searchFixed: {
      type: Boolean,
      default: false
    },
    showSelect: {
      type: Boolean,
      default: false
    },
    searchIconClass: {
      type: String,
      default: 'c-fc-gray'
    },
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      show: false,
      searchVal: "",
      selectItem: (this.selectList.length > 0 && [this.selectList[0][0]]) || [],
      isShowIcon: false
    }
  },
  watch: {
    searchText: function (val) {
      this.searchVal = val;
    },
    selectList: function (val) {
      this.selectItem = val.length > 0 && [val[0][0]];
    },
    searchVal: function (val) {
      this.$emit("input", {
        searchValue: this.searchVal
      })
    }
  },
  activated() {
    if (this.searchText == '') {
      this.show = false;
      this.searchVal = "";
    }
    this.selectItem = (this.selectList.length > 0 && [this.selectList[0][0]]) || [];
  },
  methods: {
    inputFocus() {
      this.$emit('inputFocus')
    },
    inputBlur() {
      this.$emit('inputBlur')
    },
    // 点击搜索框
    searchClick() {
      if (this.show) {
        return
      }
      this.searchVal = "";
      this.show = true;
      this.$emit("showWidth")
      this.$nextTick(() => {
        this.clickFocus();
      })
    },
    // 获取焦点事件
    clickFocus() {
      this.$nextTick(() => {
        this.$refs.input.focus();
      })
    },
    // 清空按钮事件
    clear() {
      this.searchVal = "";
      this.$emit("clear", {
        searchValue: this.searchVal
      })
    },
    // search 事件，返回参数为input的value，e={value:Number}
    search() {
      if (this.selectItem.length > 0) {
        this.$emit("search", {
          searchValue: this.searchVal,
          selectItem: this.selectItem[0]
        })
      } else {
        this.$emit("search", {
          searchValue: this.searchVal
        })
      }
    },
    // cancel 事件，返回参数为input的value，e={value:Number}
    cancel() {
      this.searchVal = "";
      this.show = false;
      this.$emit("cancel", {
        searchValue: this.searchVal
      });
    },
    changeSelect(value) {
      this.selectItem = value;
      this.$emit('changeSelect', value)
    },
    onShow() {
      this.isShowIcon = true;
    },
    onHide() {
      this.isShowIcon = false;
    }
  }
}
</script>

<style scoped>
.c-pv14 {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.c-lh52 {
  line-height: 1.3rem;
}
input {
  font-size: 0.6rem;
  padding: 0 0.4rem 0 0.4rem;
  border: 0;
  background: none;
  outline: none;
}
input::-webkit-input-placeholder {
  /* WebKit browsers 适配谷歌 */
  color: #999999;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 适配火狐 */
  color: #999999;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ 适配火狐 */
  color: #999999;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10+  适配ie*/
  color: #999999;
}
.selectPicker >>> .weui-cell__ft {
  padding: 0 !important;
}
.selectPicker >>> .weui-cell {
  padding: 0 !important;
}
.selectPicker >>> .weui-cell__ft:after {
  display: none !important;
}
.selectPicker >>> .vux-cell-value {
  color: #333333;
}
.search-fixed {
  position: fixed;
  width: 100%;
  z-index: 100;
  max-width: 640px;
}
</style>